<template>
    <view class="overall">
        <view class="content">
            <view class="switch">
                <view>{{cardInfo.nickname}}</view>
                <view>院内就诊ID号：{{cardInfo.id}}</view>
                <view>
                    <w-barcode :options="{
                        width: 600, // 宽度 单位rpx
                        height: 120, // 高度 单位rpx
                        code:cardInfo.card ,// 生成条形码的值
						format: 'CODE128' // 明确指定格式为Code 128
                    }"></w-barcode>
                </view>
                <view>{{cardInfo.card}}</view>
            </view>

            <view class="checklist">
                <view class="list">
                    <view>性别</view>
                    <view>{{cardInfo.sex==1?'男':'女'}}</view>
                </view>
                <view class="list">
                    <view>出生日期</view>
                    <view>{{cardInfo.datetime}}</view>
                </view>
                <view class="list">
                    <view>身份证</view>
                    <view>{{cardInfo.code}}</view>
                </view>
                <view class="list">
                    <view>手机号</view>
                    <view>
                        <view> {{cardInfo.tel}}</view>
                        <view @click="revise()" class="tel"> 修改手机号</view>
                    </view>
                </view>
                <view class="list">
                    <view>地址</view>
                    <view>{{cardInfo.address}}</view>
                </view>
            </view>
            <view class="list">
                <view>设置为默认</view>
                <view><wd-switch v-model="checked" @change='status' size="24px" /></view>
            </view>
        </view>
        <view class="bottom" @click="del(cardInfo.id)">删除就诊人</view>
    </view>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import { visitEdit, visitDel } from '@/api/index.js';
    
    function handleClickLeft() {
        uni.navigateBack();
    }

    const cardInfo = ref({});
    const tempTel = ref(''); // 临时存储手机号

    const checked = ref<boolean>(false);

    // 从本地存储获取就诊人信息
    uni.getStorage({
        key: 'cardDetails',
        success: function (res) {
            console.log(res.data); 
            cardInfo.value = res.data;
            if (res.data.status == 1) {
                checked.value = true;
            } else {
                checked.value = false;
            }
        }
    });

    // 设置默认就诊人状态
    function status({ value }) {
        console.log(value);
        let state = value ? 1 : 0;
        
        // 如果是取消默认就诊人，提示用户
        if (!value) {
            uni.showToast({
                title: '默认就诊卡无法取消',
                icon: 'none'
            });
            checked.value = true; // 保持开关状态
            return;
        }
        
        // 更新默认状态
        visitEdit({
            status: state,
            tel: cardInfo.value.tel,
            id: cardInfo.value.id,
            user_id: cardInfo.value.user_id,
        }).then(res => {
            console.log(res);
            if (res.code == 0) {
                uni.showToast({
                    title: '设置失败',
                    icon: 'none'
                });
                checked.value = !value; // 恢复原状态
            } else {
                cardInfo.value.status = state;
                uni.showToast({
                    title: '设置成功',
                    icon: 'none'
                });
            }
        });
    }

    // 打开修改手机号弹窗
    function revise() {
        tempTel.value = cardInfo.value.tel || '';
        
        // 使用原生弹窗
        uni.showModal({
            title: '修改手机号',
            content: '',
            editable: true,
            placeholderText: '请输入新手机号',
            confirmText: '确认',
            cancelText: '取消',
            success: function (res) {
                if (res.confirm) {
                    tempTel.value = res.content.trim();
                    confirm();
                } else if (res.cancel) {
                    console.log('用户点击取消');
                }
            }
        });
    }

    // 手机正则表达式
    const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;

    // 确认修改手机号
    function confirm() {
        if (!tempTel.value) {
            uni.showToast({
                title: '手机号不能为空',
                icon: 'none',
                duration: 3000
            });
            return;
        }
        
        const isPhoneValid = phoneReg.test(tempTel.value);
        if (!isPhoneValid) {
            uni.showToast({
                title: '手机号码格式不正确',
                icon: 'none',
                duration: 3000
            });
            return;
        }
        
        // 提交修改
        visitEdit({
            status: cardInfo.value.status,
            tel: tempTel.value,
            id: cardInfo.value.id,
            user_id: cardInfo.value.user_id,
        }).then(res => {
            console.log(res);
            if (res.code == 0) {
                uni.showToast({
                    title: '修改失败',
                    icon: 'none'
                });
            } else {
                cardInfo.value.tel = tempTel.value;
                uni.showToast({
                    title: '修改成功',
                    icon: 'none'
                });
            }
        });
    }

    // 删除就诊人
    function del(id) {
        console.log(id);
        uni.showModal({
            title: '提示',
            content: '是否删除该就诊卡',
            showCancel: true,
            success: function (res) {
                if (res.confirm) {
                    console.log('用户点击确定');
                    visitDel({
                        id: id
                    }).then(res => {
                        console.log(res);
                        if (res.code == 1) {
                            uni.showToast({
                                title: '就诊卡已删除',
                                icon: 'none'
                            });
                            uni.navigateBack();
                        } else {
                            uni.showToast({
                                title: '就诊卡删除失败',
                                icon: 'none'
                            });
                        }
                    });
                } else if (res.cancel) {
                    console.log('用户点击取消');
                }
            }
        });
    }
</script>

<style scoped>
    /* 样式保持不变 */
    .overall {
        width: 100%;
        background-color: #F4F4F4;
        min-height: 100vh;
    }

    .title {
        width: 100%;
        height: 180rpx;
        background-color: #00DACA;
        color: white;
        display: flex;
        align-items: center;
        position: fixed;
        top: 0%;
        z-index: 10000;
    }

    .name {
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 42rpx;
        margin-top: 50rpx;
        margin-left: 3%;
    }

    .name>view {
        margin-left: 20rpx;
    }

    .content {
        width: 100%;
    }

    .switch {
        width: 94%;
        min-height: 200rpx;
        padding: 20rpx 3%;
        background-color: white;
        margin-bottom: 20rpx;
    }

    .switch>view {
        display: flex;
        align-items: center;
        padding: 10rpx 0;
    }
    .switch>view:nth-child(3){
        justify-content: center;
        padding: 50rpx 0;
    }

    .switch image {
        width: 50%;
        height: 300rpx;
        object-fit: cover;
    }

    .switch>view:last-child {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
    }

    .switch>view:first-child {
        font-weight: bold;
        font-size: 36rpx;
    }

    .checklist {
        width: 100%;
        min-height: 550rpx;
        background-color: white;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        padding-top: 30rpx;
    }

    .list {
        width: 94%;
        display: flex;
        justify-content: space-between;
        padding: 20rpx 3%;
        background-color: white;
    }

    .tel {
        color: #00A89B;
        border: 3rpx #00A89B solid;
        padding: 12rpx 20rpx;
        border-radius: 2000rpx;
        margin-top: 10rpx;
    }

    .bottom {
        width: 94%;
        margin: 30rpx 3%;
        background-color: white;
        color: red;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20rpx 0;
        border-radius: 1000rpx;
    }
</style>